const path = require("path");
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextWebpackPlugin = require('extract-text-webpack-plugin');   //用来将内部样式拆分为外部样式
module.exports = 
{
    entry:path.join(__dirname,"./src/main.js"),
    output:{

        path:path.join(__dirname,"./dest"),    //打包后的文件夹
        filename:"daobao.js"
    },
        //设置插件配置项
    module: {
                rules: [{
                    test: /\.css$/,
                    //use: ['style-loader', 'css-loader'] //  loader就是要处理对应test规则的文件  loader的use规则，是从右向左处理
                     use: ExtractTextWebpackPlugin.extract({ use: 'css-loader' }) //将css用link方式引入就不需要style-loader了
                    },
                    {
                    test: /\.(png|jpg|gif)$/,
                    use: [{
                           loader: 'url-loader',
                           options: {
                                      limit: 8192
                                    }
                          }]
                    },
                    {
                        test: /\.less$/,
                        //use: ['style-loader', 'css-loader', "less-loader"]   //将less样式加入到js文件中
                        //用来将样式写入指定文件中
                        use: ExtractTextWebpackPlugin.extract({ 
                            fallback: "style-loader", 
                            use: ['css-loader', "less-loader"]
                        })         
                    }
                ]
            },
    plugins: [
        new HtmlWebpackPlugin({
            //在src目录下创建一个index.html页面当作模板来使用
            template: './src/index.html'
        }),
        new ExtractTextWebpackPlugin('style.css')
    ]

}